<template>
    <div class="categoryBar">

            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <category-item
                    :class="{ first: index === 0 }"
                    v-for="(item, index) in AllList"
                    :key="index"
                    :item="item"
                ></category-item>
                 </van-list>
    </div>
</template>

<script>
import categoryItem from './CategoryItem.vue';
import { getRecommend } from '@/api/jia';
export default {
    data() {
        return {
            AllList: [], // 分类栏的所有
            loading: false,
            finished: false

        };
    },
    methods: {
        async onLoad() {
            try {
                // 1请求数据
                const { data } = await getRecommend();
                // 2 把新数据增加的原先的数组后面。
                this.AllList = [...this.AllList, data];
                // 3 设置本次loading已经加载完成(因为进入这里loading就自然变为true，意思是正在加载中。)
                this.loading = false;
                // 4 判断数据是否加载结束
                if (this.AllList.length > 8) {
                    this.finished = true;
                    // return
                }
            } catch (error) {
                console.log(error);
            }
        }

    },
    components: {
        categoryItem
    }
};
</script>

<style scoped lang="scss">
.categoryBar {
    padding: 0 25px;
}
/deep/.first {
    border-top: unset;
}
</style>
